<template>
	<view class="goshop-refund-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-refund-head">
			<view class="goshop-list-wrap">
				<view class="goshop-list-item goshop-list-item-bottom">
					<view class="goshop-list-item-left">
						{{statusText}}<view class="required">*</view>
					</view>
					<view class="goshop-list-item-right" @tap="editFlag ? showStatus = true :'' ">
						<view class="text-color-three">{{statusName?statusName:chooseText}}</view>
						<view class="iconfont iconfont-right_arrow icon-bg-color" v-if="editFlag"></view>
					</view>
				</view>
				<view class="goshop-list-item goshop-list-item-bottom">
					<view class="goshop-list-item-left">
						{{reasonText}}<view class="required">*</view>
					</view>
					<view class="goshop-list-item-right" @tap="editFlag ? showReason = true :'' ">
						<view class="text-color-three">{{reasonName?reasonName:chooseText}}</view>
						<view class="iconfont iconfont-right_arrow icon-bg-color" v-if="editFlag"></view>
					</view>
				</view>
				<view class="refund-price">
					<view>{{amountText}}<view class="required">*</view></view>
					<view class="price-color">
						{{moneyText}}{{orderData.payAmount}}
					</view>
				</view>
			</view>
		</view>
		<view class="goshop-refund-body">
			<view class="goshop-refund-body-box">
				<view>{{describeText}}</view>
				<view class="u-m-t-20">
					<u--textarea confirmType="done" :disabled='!editFlag' v-model="form.description" :placeholder="describetipText" count></u--textarea>
				</view>
				<view class="u-m-t-20">
					<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="3"
						></u-upload>
				</view>
			</view>
		</view>
		<view class="goshop-refund-footer">
			<goshop-after-operate @submit="submitForm()" :afterData="form" :mode="mode" :edit="edit"></goshop-after-operate>
		</view>
		<u-action-sheet :actions="statusDataList" @close="selectStatusClose" :title="statusTitle" @select="selectStatusClick" :show="showStatus" :closeOnClickOverlay="true" :closeOnClickAction="true" ></u-action-sheet>
		<u-action-sheet :actions="reasonDataList" @close="selectReasonClose" :title="reasonTitle" @select="selectReasonClick" :show="showReason" :closeOnClickOverlay="true" :closeOnClickAction="true" ></u-action-sheet>
	</view>
</template>

<script>
	import {afterRefund,orderInfo,afterInfo} from '@/common/http.api.js'
	import {isEmpty} from '@/utils/utils';
	import config from '@/common/config';
	export default {
		data() {
			return {
				mode:0,
				edit:1,
				editFlag:true,
				id:'',
				statusText:'',
				amountText:'',
				applyfailText:'',
				notrecordedText:'',
				submitText:'',
				describetipText:'',
				applysuccessText:'',
				notsentText:'',
				reasonText:'',
				dislikeText:'',
				emptypackageText:'',
				describeText:'',
				receivedText:'',
				uncollectedText:'',
				chooseText:'',
				uploadloadingText:'',
				moneyText:'',
				orderData:{
					payAmount:0,
				},
				showStatus:false,
				showReason:false,
				statusName:'',
				reasonName:'',
				reasonTitle: this.$t('refund.reason.text'),
				statusTitle: this.$t('refund.status.text'),
				statusDataList:[
					{name:this.$t('refund.uncollected.text'),status:1},
					{name:this.$t('refund.received.text'),status:2},
				],
				reasonDataList:[
					{name:this.$t('refund.dislike.text'),type:1},
					{name:this.$t('refund.emptypackage.text'),type:2},
					{name:this.$t('refund.notsent.text'),type:3},
					{name:this.$t('refund.notrecorded.text'),type:4}
				],
				form:{
					orderId:'',
					orderGoodId:'',
					status:'',
					reason:'',
					description:'',
					imgs:[]
				},
				fileList: [],
			};
		},
		async onLoad(e){
			if(e.id){
				this.id = e.id;
				this.mode = parseInt(e.mode);
				this.edit = parseInt(e.edit);
				debugger
				this.editFlag = false;
				await this.getAfterInfo();
			}else{
				this.form.orderId = e.orderId;
				this.form.orderGoodId = e.orderGoodId;
				await this.getOrderInfo()
			}
		},
		onShow() {
		   this.refresh();	
		},
		methods:{
			refresh(){
				this.statusText = this.$t('refund.status.text');
				this.amountText = this.$t('refund.amount.text');
				this.applyfailText = this.$t('refund.applyfail.text');
				this.notrecordedText = this.$t('refund.notrecorded.text');
				this.submitText = this.$t('refund.submit.text');
				this.describetipText = this.$t('refund.describetip.text');
				this.applysuccessText = this.$t('refund.applysuccess.text');
				this.notsentText = this.$t('refund.notsent.text');
				this.reasonText = this.$t('refund.reason.text');
				this.dislikeText = this.$t('refund.dislike.text');
				this.emptypackageText = this.$t('refund.emptypackage.text');
				this.describeText = this.$t('refund.describe.text');
				this.receivedText = this.$t('refund.received.text');
				this.uncollectedText = this.$t('refund.uncollected.text');
				this.moneyText = this.$t('common.money.text');
				this.chooseText = this.$t('common.choose.text');
				this.uploadloadingText = this.$t('common.uploadloading.text');
			},
			getAfterInfo(){
				  afterInfo({params:{id:this.id}}).then(res => {
						if (res.code === 0) {
							this.form = res.data;
							this.statusName = res.data.cargoStatus;
							this.reasonName = res.data.returnReason;
							this.orderData.payAmount = res.data.refundAmount;
							for (let i = 0; i < this.form.imgs.length; i++) {
								let imgUrl = this.form.imgs[i];
								debugger
								this.fileList.push( {
									status: 'success',
									message: '',
									url: imgUrl
								});
							}
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
			},
			selectReasonClose(){
				this.showReason = false;
			},
			selectReasonClick(index){
				this.form.reason = index.name
				this.reasonName = index.name;
				this.showReason = false;
			},
			selectStatusClose(){
				this.showStatus = false;
			},
			selectStatusClick(index){
				this.form.status = index.name
				this.statusName = index.name;
				this.showStatus = false;
			},
			submitForm(){
				this.form.imgs=[];
				let that = this;
				for (let i = 0; i < this.fileList.length; i++) {
					let item = this.fileList[i];
					debugger
					this.form.imgs.push(item.url);
				}
				afterRefund(this.form).then(res => {
					if (res.code === 0) {
						debugger
						this.$refs.uToast.show({
							message: that.applysuccessText,
							type: 'success'
						})
						uni.hideLoading();
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: that.applyfailText,
							content: res.msg,
						});
					}
				});
			},
			getOrderInfo(){
				orderInfo({params:{id:this.form.orderId}}).then(res => {
					if (res.code === 0) {
						debugger
						this.orderData = res.data;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: that.uploadloadingText
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let json = JSON.parse(result);
					if(json.code === 0){
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: json.data
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/app/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"tenant-id": config.tenantId //token校验
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						complete: (res)=>{
							let json = JSON.parse(res.data);
							if(json.code != 0){
								this.fileList.splice(this.fileList.length-1, 1)
								this.$refs.uToast.show({
									message: json.msg,
									type: 'error',
								})
							}
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
.goshop-list-item-right{
	align-items: center;
	display: flex;
}
.refund-price{
	padding: 20rpx 0;
}
.required{
	width: 20rpx;
    height: 20rpx;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 40rpx;
    font-size: 40rpx;
    color: #f00;
}
.goshop-list-item-left{
	display: flex;
	align-items: center;
}
.goshop-refund-container{
	.goshop-refund-head{
		padding: 10rpx;
		.goshop-list-wrap{
			border-radius: 20rpx;
		}
	}
	.goshop-refund-body{
		padding: 10rpx;
		.goshop-refund-body-box{
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			border-radius: 20rpx;
		}
	}
	.goshop-refund-footer{
		padding: 20rpx;
	}
}
</style>
